<template>
    <n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="240" :collapsed="useSystemConfig.collapsed" show-trigger @collapse="useSystemConfig.changeCollapsed(true)" @expand="useSystemConfig.changeCollapsed(false)">
        <n-menu v-model:value="useSystemConfig.page" :options="menuOptions" :on-update:value="updateSelectKey" />
    </n-layout-sider>

    <n-layout-content content-style="padding: 0 8px 0 8px;">
        <router-view></router-view>
    </n-layout-content>
</template>
    
<script setup lang='ts'>
import { Collections20Regular, CloudLink16Regular } from '@vicons/fluent'
import { Playlist, Friends } from '@vicons/tabler'
import { NIcon, MenuOption, useLoadingBar } from "naive-ui";
import { useRouter } from 'vue-router'
import { h, Component, onUnmounted } from "vue";
import { userInfoStore, useSystemConfigStore } from '../store/'

onUnmounted(() => {

})

const useSystemConfig = useSystemConfigStore()
const userInfo = userInfoStore()
const router = useRouter()
const loadingBar = useLoadingBar()


// 监听系统托盘用户事件
window.api.useConfig(() => {
    userInfo.loginState == true ? router.push({ name: 'userInfo' }) : router.push({ name: 'registerOrLogin' })
})



function renderIcon(icon: Component) { // 渲染vicons
    return () => h(NIcon, null, { default: () => h(icon) })
}
function renderFontIcon(icon: String) { // 渲染fonticon
    return () => h("svg", { class: "icon", "aria-hidden": "true" }, h("use", { "xlink:href": `#${icon}` }))
}

const menuOptions: MenuOption[] = [
    {
        label: '乐库',
        key: 'audioLibrary',
        icon: renderFontIcon('icon-music'),
    },
    {
        label: '我的喜欢',
        key: 'likePlayList',
        icon: renderFontIcon('icon-aixin3'),
    },
    {
        key: 'divider-1',
        type: 'divider',
        props: {

        }
    },
    {
        label: '收藏夹',
        key: 'collectPlayList',
        icon: renderIcon(Collections20Regular),
    },
    {
        label: '本地音乐',
        key: 'localPlayList',
        icon: renderIcon(Playlist),
    },
    {
        label: '我的云盘',
        key: 'cloudPlayList',
        icon: renderIcon(CloudLink16Regular),
    },
    {
        label: '好友',
        key: 'friends',
        icon: renderIcon(Friends),
    },
]

// 切换选择的路由
const updateSelectKey = (key: PlayConfigState['playListMode']) => {
    useSystemConfig.changePage(key)
    router.push({ name: key })
}

// 配置进度条
router.beforeEach((_to, _from) => { // 全局前置守卫
    loadingBar.start()
    return true
})
router.afterEach((_to, _from) => { // 全局后置钩子
    loadingBar.finish()
})


</script>
    
<style scoped lang="less">
.main-container {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;

    .main-menu {
        min-width: 250px;
        width: 20%;
        height: 100%;
    }

    .main-content {
        min-width: 600px;
        width: 60%;
        height: 100%;
    }
}
</style>